<template>
  <div class="nav-wrap">
    <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#446BDE"
        text-color="#fff"
        active-text-color="#fff"
        @select="addTab">
        <menu-item v-for="menu in menuList" :key="menu.resourceId" :item="menu" />
    </el-menu>
  </div>
</template>
<script>
import MenuItem from './MenuItem'
export default {
  name:'Menu',
  components: { MenuItem },
  props:{
    activeIndex: String,
    addTab: {
      type: Function,
      required: true
    },
    menuList: {
      type: Array,
      required: true
    }
  }
}
</script>
<style lang="scss">
.nav-wrap {
  // width: 1550px;
  height: 48px;
  overflow: hidden;
  .el-menu {
    display: flex;
  }
  .menu-item {
    float: left;
    .el-menu-item,
    .el-submenu {
      height: 48px;
      line-height: 48px;
      .el-submenu__title {
        height: 48px;
        line-height: 48px;
      }
      &.is-opened .el-submenu__title,
      &:hover,
      &:hover .el-submenu__title {
        border-bottom: 4px solid;
        border-bottom-color: #4CA4FE!important;
        background-color: #3656b2!important;
      }
    }

    .el-submenu__icon-arrow {
        position: static;
        vertical-align: middle;
        font-size: 14px;
        margin-left: 8px;
        margin-top: -3px;
    }
    // .is-active {
    //   .iconfont {
    //     color: #409EFF;
    //   }
    // }
  }
}
</style>
